<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue" @keyup.space="handleClick">
        <button @click="handleClick">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id" @click="click(item.id)">
                {{item.name}}
            </li>
        </ul>
        <template v-if="show==='name'">
            <span>name</span>
            <input type="text" placeholder="name" key="name">
        </template>
        <template v-else>
            <span>email</span>
            <input type="text" placeholder="email" key="email">
        </template>
        <button @click="change">切换</button>
        <name-content></name-content>
    </div>

    <script>
        Vue.component('nameContent', {
            template: '<h1>hellow</h1>'
        });

        let app = new Vue({
            el: '#app',
            data: {
                home:'',
                show: 'name',
                inputValue: '',
                list: [{
                    'name':'zhang',
                    'id':'001'
                },{
                    'name':'san',
                    'id':'002'
                }],
                img: 'imgUrl'
            },
            methods: {
                change () {
                    this.show = this.show === 'name' ? 'email' : 'name'
                },
                handleClick () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                    console.log(this.$refs.name)
                },
                click (msg) {
                    alert(msg)
                }
            }
        })
    </script>
</body>
</html>
